<template>
  <div>
    <el-form :model="config" ref="configTableForm">
      <el-table
          header-row-class-name="header_row_style"
          :data="config.list"
          style="width: 100%"
          max-height="450">
        <el-table-column
            label="名称"
            prop="code"
            show-overflow-tooltip
            width="80">
        </el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <el-form-item :prop="'list.'+scope.$index+'.value'">
              <el-input
                  :disabled="scope.row.showType == 3 ||  scope.row.showType == 4? true : false"
                  v-model.trim="scope.row.value"
                  size="mini"
                  placeholder="请填写值"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
            label="字段类型"
            width="120"
            show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.type }}
          </template>
        </el-table-column>
        <el-table-column label="查询名">
          <template slot-scope="scope">
            <el-form-item
                :prop="'list.'+scope.$index+'.name'"
                :rules="[
                              { required: scope.row.input, message: '不能为空', trigger: 'blur' }]">
              <el-input
                  :disabled="scope.row.input ? false : true"
                  placeholder="请输入查询名"
                  v-model.trim="scope.row.name"
                  :maxlength="20"
                  size="mini"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="长度" width="100">
          <template slot-scope="scope">
            <el-input-number
                :min="0"
                v-model="scope.row.length"
                size="mini"
                controls-position="right"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="描述">
          <template slot-scope="scope">
            <el-input
                placeholder="请输入描述"
                v-model.trim="scope.row.memo"
                size="mini"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="是否排序" width="100">
          <template slot-scope="scope">
            <el-select
                size="mini"
                v-model="scope.row.sort"
                @change="showModeChange(scope.row.sort, scope.$index)">
              <el-option label="无" value="0"></el-option>
              <el-option label="升序" value="1"></el-option>
              <el-option label="降序" value="2"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="输入" width="50">
          <template slot-scope="scope">
            <el-checkbox
                v-model="scope.row.input"
            ></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column width="80">
          <template slot="header" slot-scope="scope">

            <el-checkbox v-model="AallOutput" @change="handleAllOutput"></el-checkbox>
            <span>输出</span>
          </template>
          <template slot-scope="scope">
            <el-checkbox
                v-model="scope.row.output"
            ></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="是否必填" width="80">
          <template slot-scope="scope">
            <el-checkbox
                v-model="scope.row.isMust"
                :disabled="!scope.row.input"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="展示类型" width="100">
          <template slot-scope="scope">
            <el-select
                size="mini"
                :disabled="scope.row.input ? false : true"
                v-model="scope.row.showType"
                @change="showModeChange(scope.row.showType, scope.$index)">
              <el-option label="文本" value="1"></el-option>
              <el-option label="数字" value="2"></el-option>
              <el-option label="日期" value="3"></el-option>
              <el-option label="下拉" value="4" disabled></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="查询方式" width="100">
          <template slot-scope="scope">
            <el-select
                size="mini"
                :disabled="scope.row.input ? false : true"
                v-model="scope.row.queryType">
              <el-option
                  label="模糊"
                  value="1"
                  :disabled="scope.row.displayType == 3 || scope.row.displayType == 4 ? true : false"></el-option>
              <el-option
                  label="精准"
                  value="2"></el-option>
              <el-option
                  label="区间"
                  value="3"
                  :disabled="scope.row.displayType == 1 || scope.row.displayType == 4 ? true : false"></el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div class="btns">
      <el-button type="primary" @click="submitConfig('configTableForm')">保存并确定</el-button>
    </div>
  </div>

</template>

<script>
export default {
  data() {
    return {
      // 配置列表
      config: {
        list: []
      },
    }
  },
  mounted() {
    this.getAllColumns()
  },
  methods: {
    // 获取表格数据进行渲染
    getAllColumns() {
      var data = this.$route.query
      getTableDetail(data).then((res) => {
        if (res.data.infoCode == 200) {
          this.configData = new Array();
          for (let i = 0; i < res.data.data.length; i++) {
            this.configData.push({
              value: res.data.data[i].value || '',
              sort: res.data.data[i].sort || '0',
              input: res.data.data[i].input || false,
              output: res.data.data[i].output || false,
              isMust: res.data.data[i].isMust || false,
              showType: res.data.data[i].showType || '1',
              queryType: res.data.data[i].queryType || '1',
              length: res.data.data[i].length,
              code: res.data.data[i].columnName,
              type: res.data.data[i].udtName || '',
              id: res.data.data[i].id,
              name: res.data.data[i].name,
              memo: res.data.data[i].memo,
              apiId: res.data.data[i].apiId,
              relName: res.data.data[i].relName || '',
              tableSchema: res.data.data[i].tableSchema,
              tableName: res.data.data[i].tableName,

            });
          }
          this.$set(this.config, 'list', this.configData);
          this.$nextTick(function () {
            this.$refs['configTableForm'].clearValidate();
          })
        } else {
          this.$set(this.config, 'list', new Array());
        }
      }).catch(() => {
      })
    },
    //修改表格后提交
    submitConfig(formName) {
      this.config.list.forEach(e => {
        e.apiId = this.id
      })
      this.$refs[formName].validate((valid) => {
        if (valid) {
          saveApiColumns(this.config.list).then((res) => {
            this.configLoading = false;
            if (res.data.infoCode == 200) {
              this.$message({
                type: 'success',
                message: '配置成功'
              });
              this.$router.back(-1)
            } else {
              this.$message({
                type: 'error',
                message: '配置失败！' + res.data.info
              });
              this.getAllColumns()
            }
          }).catch(() => {

          })
        } else {
          return false;
        }
      });
    },
  }
}

</script>
